<template>
	<z-paging ref="pagingRef" v-model="state.list" @query="queryList">
		<template #top>
			<hx-navbar title="商品评价"> </hx-navbar>
		</template>
		<view class="appraise-container">
			<view class="appraise-warp">
				<view class="appraise-content" v-for="(item, index) in state.list" :key="index">
					<view class="appraise-content-title">
						<u-avatar size="mini" :src="item.avatarUrl"></u-avatar>
						<view class="right">
							<view>{{ item.nickName }}</view>
						</view>
					</view>
					<view class="appraise-content-comment">
						<view class="comment-header">
							<view class="appraise-content-score">
								<u-rate :count="5" :disabled="true" v-model="item.goodsScore"></u-rate>
							</view>
							<view class="create-time"> {{ item.createTime }} </view>
						</view>
						<view class="u-padding-top-20"> {{ item.content || '该用户未填写' }}</view>
						<view class="content-images" v-if="item.picUrls">
							<view class="image-item" v-for="(pic, picIndex) in item.picUrls" :key="picIndex">
								<u-image :border-radius="8" width="100%" height="100%" :src="pic"></u-image>
							</view>
						</view>
						<!-- 商家回复 -->
						<view v-if="item.replyTime && item.businessReply" class="business-reply">
							<view>{{ item.replyTime }}</view>
							商家回复：{{ item.businessReply }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getPage } from '@/api/product/appraise';
// 定义变量
const pagingRef = ref<ZPagingInstance>();
const spuId = ref('');
const state = reactive<{ list: Array<any> }>({
	list: [],
});

onLoad((options) => {
	spuId.value = options?.spuId;
});
const queryList: ZPagingEvent.Query = (pageNo: number, pageSize: number) => {
	getPage({
		current: pageNo,
		size: pageSize,
		spuId: spuId.value,
		descs: 'create_time',
	}).then((response) => {
		pagingRef.value?.complete(response.data.records);
	});
};
</script>

<style lang="scss" scoped>
.appraise-container {
	padding: 0 20rpx;

	.appraise-warp {
		border-radius: 10rpx;
		.appraise-content {
			.appraise-content-comment {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				.comment-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.appraise-content-title {
				display: flex;
				align-items: center;
				padding-top: 20rpx;
				.right {
					padding-left: 20rpx;

					.create-time {
						font-size: 22rpx;
						color: #909090;
					}
				}
			}

			.appraise-content-score {
				padding-top: 10rpx;
				font-size: 22rpx;
				color: #909090;
			}
			.content-images {
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start;
				margin-top: 10rpx;

				.image-item {
					width: 33.33%;
					height: 100px;
					padding: 10rpx;
				}
			}
			.business-reply {
				background-color: #f2f2f2;
				border-radius: 20rpx;
				padding: 20rpx;
			}
		}
	}
}
</style>
